<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-type" content="text/html; charset=utf-8">
		<title>MVC Test for dynamic label and calculating totals</title>
		<style type="text/css">
			@import "css/app-format.css";
			@import "../../../dijit/themes/claro/claro.css";
			.cell { width: 30%;  display:inline-block; }			
		</style>
		<script type="text/javascript" data-dojo-config="parseOnLoad:0,isDebug:1,async:1,mvc:{debugBindings:1}" src="../../../dojo/dojo.js"></script>
		<script type="text/javascript">
		var model;
 
		require([
			'dojo/parser',
			'dojo/ready',
			"dojox/mvc/getStateful",
			'dojox/mvc/at',
			'dijit/form/TextBox',
			'dijit/form/Button',
			'dojox/mvc/Group',
			'dojox/mvc/Repeat',
			'dojox/mvc/Output'
			], function(parser, ready, getStateful, at){

			// Order data
			orderData = {
				"Serial" : "111",
				"First" : "",
				"Lab" : "TEST",
				"Last" : "last",
				"Email" : "email",
				"Age" : "33"
			};

			// Initial sum data
			sumData = {
				"one" : 1,
				"two" : 2,
				"three" : 3,
				"four" : 4,
				"total" : 10
			};

			// Initial repeat sum data
			sumRepeatData = {
				"list" : [
				          {"item" : 1},
				          {"item" : 2},
				          {"item" : 3},
				          {"item" : 4}
				          ],	
				"total" : 10
			};

			sumValuesConverter = {
					format: function(value){
						console.log("in sumValuesConverter format value ="+value);
						value = value || 0;
						return value;
					},
					parse: function(value){
						console.log("in sumValuesConverter parse value ="+value);
						recomputeTotal();
						return value;
					}
			};

			ageLabelConverter = {
					format: function(value){
						console.log("in ageLabelConverter format value ="+value);
						if(!value){
							return "Enter Age";
						}else{
							return "Enter "+value+"'s age";
						}
					},
					parse: function(value){
						console.log("in ageLabelConverter parse value ="+value);
						return value;
					}
			};


			sumRepeatValuesConverter = {
					format: function(value){
						console.log("in sumRepeatValuesConverter format value ="+value);
						value = value || 0;
						recomputeRepeatTotal();
						return value;
					},
					parse: function(value){
						console.log("in sumRepeatValuesConverter parse value ="+value);
						return value;
					}
			};
			
			ready(function(){
				parser.parse();
				recomputeTotal();
			});

			// Old api
			//summodel = mvc.newStatefulModel({ data : sumData });
			//sumrepeatmodel = mvc.newStatefulModel({ data : sumRepeatData });
			//model = mvc.newStatefulModel({ data : order });
			// new Api
			summodel = getStateful(sumData );
			sumrepeatmodel = getStateful(sumRepeatData);
			model = getStateful(orderData);
			

		});

		function recomputeTotal() {
				require([
				         "dijit/registry",
				         "dojox/mvc/at"
				         ], function(registry, at){
								var total = 0;			
								var wone = parseInt(registry.byId("oneInput").get("value")) || 0;
			   					var wtwo = parseInt(registry.byId("twoInput").get("value")) || 0;
								var wthree = parseInt(registry.byId("threeInput").get("value")) || 0;
			   					var wfour = parseInt(registry.byId("fourInput").get("value")) || 0;
			   					total = wone + wtwo + wthree + wfour;
			   					var wtotal = registry.byId("totalOutput");
			   					wtotal.set("value", total);			   					
							});
			};


			function recomputeRepeatTotal() {
				require([
				         "dijit/registry",
				         "dojox/mvc/at"
				         ], function(registry, at){
								var total = 0;
								for(var i=0;i<sumrepeatmodel.list.length;i++){
									console.log("sumrepeatmodel.list[i].item = "+sumrepeatmodel.list[i].item);
									var item = parseInt(sumrepeatmodel.list[i].item) || 0;
									total = total + item;
								}
			   					var wtotal = registry.byId("totalrepeatOutput");
			   					wtotal.set("value", total);			   					
							});
			};
			
			
		</script>
				
	</head>
	<body class="claro">
		<script type="dojo/require">at: "dojox/mvc/at"</script>
		<div id="wrapper">
		<div id="header">
			<div id="navigation">
			</div>
			<div id="headerInsert">
				<h2>MVC Test for dynamic label and calculating totals</h2>
			</div>
		</div>
		<div id="main">
		<div id="leftNav"></div>
		<div id="mainContent">
		<h4>Update Age label with first name when it is set.</h4>
		<div data-dojo-type="dojox.mvc.Group"
				data-dojo-props="target: model">		
			<div class="row">
				<label class="cell" for="firstInput">Enter first name:</label>
				<input class="cell" id="firstInput" data-dojo-type="dijit.form.TextBox" 
					data-dojo-props="value: at('rel:', 'First')">
			</div>
			<div class="row">
				<label class="cell" for="lastnameInput">Enter last name:</label>
				<input class="cell" id="lastnameInput" data-dojo-type="dijit.form.TextBox" 
					data-dojo-props="value: at('rel:', 'Last')">
			</div>
			<div class="row">
				<label class="cell" for="emailInput">Enter email:</label>
				<input class="cell" id="emailInput" data-dojo-type="dijit.form.TextBox" 
					data-dojo-props="value: at('rel:', 'Email')">
			</div>
			<div class="row">
				<label data-dojo-type="dojox.mvc.Output" class="cell" for="ageInput"
					data-dojo-props="value: at('rel:', 'First').direction(at.from).transform(ageLabelConverter)"></label>
				<input class="cell" id="ageInput" data-dojo-type="dijit.form.TextBox" 
					data-dojo-props="value: at('rel:', 'Age')">
			</div>
		</div>
		<br/>
		<h4>Update total when any of the fields are changed.</h4>
		<div data-dojo-type="dojox.mvc.Group"
			data-dojo-props="target: summodel">
		<div class="row">
			<label class="cell" for="oneInput">Item one:</label>
			<input class="cell" id="oneInput" data-dojo-type="dijit.form.TextBox" 
				data-dojo-props="value: at('rel:', 'one').transform(sumValuesConverter)">
		</div>
		<div class="row">
			<label class="cell" for="twoInput">Item two:</label>
			<input class="cell" id="twoInput" data-dojo-type="dijit.form.TextBox" 
				data-dojo-props="value: at('rel:', 'two').transform(sumValuesConverter)">
		</div>
		<div class="row">
		<label class="cell" for="threeInput">Item three:</label>
		<input class="cell" id="threeInput" data-dojo-type="dijit.form.TextBox" 
			data-dojo-props="value: at('rel:', 'three').transform(sumValuesConverter)">
	</div>
	<div class="row">
		<label class="cell" for="fourInput">Item four:</label>
		<input class="cell" id="fourInput" data-dojo-type="dijit.form.TextBox" 
			data-dojo-props="value: at('rel:', 'four').transform(sumValuesConverter)">
	</div>
		<div class="row">
			<label class="cell" for="totalOutput">Total:</label>
			<div class="cell" id="totalOutput" data-dojo-type="dojox.mvc.Output" 
				data-dojo-props="value: at('rel:', 'total')"></div>
	</div>
	<br/>
	<h4>Update total when any of the fields are changed - Using a Repeat.</h4>
	<div id="outergroupId" data-dojo-type="dojox.mvc.Group" data-dojo-props="target: sumrepeatmodel">
		<div id="repeatId" data-dojo-type="dojox.mvc.Repeat" 
				data-dojo-props="children: at('rel:', 'list')">
			<div data-dojo-type="dojox.mvc.Group"
				data-dojo-props="target: at('rel:${this.index}')">
				<div class="row">
					<label class="cell" for="input${this.index}">Item ${this.index}:</label>
					<input class="cell" id="input${this.index}" data-dojo-type="dijit.form.TextBox" 
						data-dojo-props="value: at('rel:', 'item').transform(sumRepeatValuesConverter)">
				</div>
			</div>
		</div>
		<div class="row">
			<label class="cell" for="totalrepeatOutput">Total:</label>
			<div class="cell" id="totalrepeatOutput" data-dojo-type="dojox.mvc.Output" 
				data-dojo-props="value: at('rel:', 'total')"></div>
		</div>
	</div>
	<br/>
		<br/>
		Model:
		<button id="reset" type="button" data-dojo-type="dijit.form.Button" 
				data-dojo-props="onClick: function(){model.set(orderData);summodel.set(sumData);sumrepeatmodel.set(sumRepeatData);}">Reset</button>
		</div></div></div>
	</body>
</html>
